import React, { Component } from 'react';
import {
    Card,
    Form,
    Input,
    Button,
    notification,
    message,
    Row,
    Col,
} from 'antd';
import './index.css';
import http from '../../http';

const { Item } = Form;

let loading = false;

export default class Login extends Component {
    constructor(props) {
        super(props);

        this.state = {
            buttonText: '获取验证码',
            loading: false,
            mobile: '',
        };

        this.submit = this.submit.bind(this);
    }

    handleCodeClick() {
        // 正在倒计时，你不能重复点击
        if (loading) {
            return;
        }

        // 向后端发送请求，获取验证码
        // http.get('/code');

        // 马上设置正在加载，防止用户重复点击，重复设置定时器
        loading = true;
        let timeNum = 5;

        const intervalId = setInterval(() => {
            timeNum--;
            this.setState({ buttonText: `重新获取验证码 ${timeNum} 秒` });
            if (timeNum <= 0) {
                clearInterval(intervalId);
                this.setState({ buttonText: '获取验证码' });
                loading = false;
            }
        }, 1000);
    }

    // async submit(values) {
    //     const { username, password } = values;
    //     if (!username || !password) {
    //         notification.open({
    //             message: '表单校验失败',
    //             description: '用户密码不能为空',
    //         });
    //     } else {
    //         // 发送请求了
    //         const res = await http.post('/login', values);
    //         console.log('res', res);
    //         if (res.code !== 200) {
    //             return message.error(res.message);
    //         }
    //         // 登录成功，存储 token，只要你把 token 存到 sessionStorage 中，
    //         // 那么下一次在发送请求时，都能在 header 中添加上这个 token，服务器就能做身份认证了
    //         window.sessionStorage.setItem('token', res.data.token);
    //         // 存储用户信息，为了在页面中显示
    //         window.sessionStorage.setItem(
    //             'user',
    //             JSON.stringify(res.data.user),
    //         );
    //         // 权限菜单在登录成功之后返回，然后我们把它存到 sessionStorage 里面
    //         window.sessionStorage.setItem(
    //             'menus',
    //             JSON.stringify(res.data.menus),
    //         );
    //         // 登录成功了，跳转到后台管理首页，也就是 dashboard 页面
    //         this.props.history.push('/dashboard');
    //     }
    // }

    handlePhoneChange(e) {
        let mobile = e.target.value;
        if (mobile.length > 3) {
            const one = mobile.substring(0, 3);
        }

        if (mobile.length > 7) {
            const two = mobile.substring(3, 7);
        }

        if (mobile.length > 11) {
            const three = mobile.substring(7, 11);
        }

        mobile = `${one} ${two} ${three}`;
        this.setState({ mobile });
    }

    async submit(value) {}

    render() {
        return (
            <div className="login">
                <div className="login-box">
                    <Card title="成绩管理系统登录" hoverable>
                        <Row gutter={5}>
                            <Col span={16}>
                                <Input
                                    placeholder="请输入手机号"
                                    value={this.state.mobile}
                                    onChange={(e) => this.handlePhoneChange(e)}
                                />
                            </Col>

                            <Col span={7} offset={1}>
                                <Button onClick={() => this.handleCodeClick()}>
                                    {this.state.buttonText}
                                </Button>
                            </Col>
                        </Row>
                    </Card>
                </div>
            </div>
        );
    }
}
